From a979cff7484507c90591b2d374eb159873d33490 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Fri, 19 Feb 2016 18:03:38 +0100 Subject: [PATCH] Adwaita: check/radio/slider gradient tweaks --- gtk/theme/Adwaita/_drawing.scss | 39 ++++++++++++++---------- gtk/theme/Adwaita/gtk-contained-dark.css | 36 +++++++++++----------- gtk/theme/Adwaita/gtk-contained.css | 36 +++++++++++----------- 3 files changed, 59 insertions(+), 52 deletions(-) diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss index 264c306dbf..63f6adf5c1 100644 --- a/gtk/theme/Adwaita/_drawing.scss +++ b/gtk/theme/Adwaita/_drawing.scss @@ -235,12 +235,21 @@ color: $tc; outline-color: transparentize($tc, 0.7); border-color: if($c!=$bg_color, _border_color($c), $borders_color); - @if $variant == 'light' { background-image: linear-gradient(to bottom, $c, darken($c, 4%) 60%, darken($c, 10%)); } - @else { background-image: linear-gradient(to bottom, darken($c, 2%), darken($c, 4%) 60%, darken($c, 6%)); } - @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), - inset 0 -2px $c, - inset 0 -1px darken($c, 10%), - $_button_edge); + @include _button_text_shadow($tc, $c); + @if $variant == 'light' { + background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%); + @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), + inset 0 -2px lighten($c, 2%), + inset 0 -1px darken($c, 12%), + $_button_edge); + } + @else { + background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%); + @include _shadows(inset 0 1px $_hilight_color, + inset 0 -2px darken($c, 4%), + inset 0 -1px darken($c, 9%), + $_button_edge); + } } @else if $t==hover-alt { @@ -251,18 +260,16 @@ outline-color: transparentize($tc, 0.7); border-color: if($c!=$bg_color, _border_color($c), $borders_color); @if $variant == 'light' { - background-image: linear-gradient(to bottom, lighten($c, 6%), $c 60%, darken($c, 4%)); - @include _button_text_shadow($tc,lighten($c, 6%)); - @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), - inset 0 -2px lighten($c, 6%), - inset 0 -1px darken($c, 6%), - $_button_edge); + background-image: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%); + box-shadow: inset 0 1px _button_hilight_color(lighten($c, 6%)), + inset 0 -2px lighten($c, 5%), + inset 0 -1px darken($c, 10%), + $_button_edge; } @else { - background-image: linear-gradient(to bottom, lighten($c, 1%), darken($c, 2%) 60%, darken($c, 4%)); - @include _button_text_shadow($tc,lighten($c, 6%)); - @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), - inset 0 $c, + background-image: linear-gradient(to bottom, $c 20%, darken($c, 4%) 90%); + @include _shadows(inset 0 1px $_hilight_color, + inset 0 -2px darken($c, 3%), inset 0 -1px darken($c, 6%), $_button_edge); } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 80df69eba3..a779c9eb5c 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -2349,16 +2349,16 @@ switch { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #393f3f, inset 0 -1px #212424, 0 1px rgba(0, 0, 0, 0.1); } + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + background-image: linear-gradient(to bottom, #323737 20%, #2a2f2f 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2f3434, inset 0 -1px #232727, 0 1px rgba(0, 0, 0, 0.1); } switch:hover slider { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434); - text-shadow: 0 -1px rgba(0, 0, 0, 0.76376); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 #393f3f, inset 0 -1px #2a2f2f, 0 1px rgba(0, 0, 0, 0.1); } + background-image: linear-gradient(to bottom, #393f3f 20%, #2f3434 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #323737, inset 0 -1px #2a2f2f, 0 1px rgba(0, 0, 0, 0.1); } switch:active slider { border: 1px solid #0f2b48; } switch:disabled slider { @@ -2446,8 +2446,10 @@ radio { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #393f3f, inset 0 -1px #212424, 0 1px rgba(0, 0, 0, 0.1); } + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + background-image: linear-gradient(to bottom, #323737 20%, #2a2f2f 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2f3434, inset 0 -1px #232727, 0 1px rgba(0, 0, 0, 0.1); } check:only-child, radio:only-child { margin: 0; } @@ -2456,10 +2458,8 @@ radio { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434); - text-shadow: 0 -1px rgba(0, 0, 0, 0.76376); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 #393f3f, inset 0 -1px #2a2f2f, 0 1px rgba(0, 0, 0, 0.1); } + background-image: linear-gradient(to bottom, #393f3f 20%, #2f3434 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #323737, inset 0 -1px #2a2f2f, 0 1px rgba(0, 0, 0, 0.1); } check:active, radio:active { color: #eeeeec; @@ -2679,18 +2679,18 @@ scale { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #343a3a, #2f3434 60%, #2a2f2f); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #393f3f, inset 0 -1px #212424, 0 1px rgba(0, 0, 0, 0.1); + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + background-image: linear-gradient(to bottom, #323737 20%, #2a2f2f 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #2f3434, inset 0 -1px #232727, 0 1px rgba(0, 0, 0, 0.1); border: 1px solid #151717; border-radius: 100%; } scale slider:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #3b4242, #343a3a 60%, #2f3434); - text-shadow: 0 -1px rgba(0, 0, 0, 0.76376); - -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.76376); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 #393f3f, inset 0 -1px #2a2f2f, 0 1px rgba(0, 0, 0, 0.1); } + background-image: linear-gradient(to bottom, #393f3f 20%, #2f3434 90%); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -2px #323737, inset 0 -1px #2a2f2f, 0 1px rgba(0, 0, 0, 0.1); } scale slider:active { border-color: #0f2b48; } scale slider:disabled { diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 4123518994..9d00417f3b 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -2360,16 +2360,16 @@ switch { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; - background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd); - box-shadow: inset 0 1px white, inset 0 -2px #e8e8e7, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); } + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + background-image: linear-gradient(to bottom, #f4f4f4 20%, #e8e8e7 90%); + box-shadow: inset 0 1px white, inset 0 -2px #ededec, inset 0 -1px #cacac8, 0 1px rgba(0, 0, 0, 0.1); } switch:hover slider { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; - background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white, inset 0 -2px #f7f7f7, inset 0 -1px #d9d9d7, 0 1px rgba(0, 0, 0, 0.1); } + background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%); + box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); } switch:active slider { border: 1px solid #184472; } switch:disabled slider { @@ -2468,8 +2468,10 @@ radio { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; - background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd); - box-shadow: inset 0 1px white, inset 0 -2px #e8e8e7, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); } + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + background-image: linear-gradient(to bottom, #f4f4f4 20%, #e8e8e7 90%); + box-shadow: inset 0 1px white, inset 0 -2px #ededec, inset 0 -1px #cacac8, 0 1px rgba(0, 0, 0, 0.1); } check:only-child, radio:only-child { margin: 0; } @@ -2478,10 +2480,8 @@ radio { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; - background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white, inset 0 -2px #f7f7f7, inset 0 -1px #d9d9d7, 0 1px rgba(0, 0, 0, 0.1); } + background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%); + box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); } check:active, radio:active { color: #2e3436; @@ -2710,18 +2710,18 @@ scale { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; - background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd); - box-shadow: inset 0 1px white, inset 0 -2px #e8e8e7, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + background-image: linear-gradient(to bottom, #f4f4f4 20%, #e8e8e7 90%); + box-shadow: inset 0 1px white, inset 0 -2px #ededec, inset 0 -1px #cacac8, 0 1px rgba(0, 0, 0, 0.1); border: 1px solid #969691; border-radius: 100%; } scale slider:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #9d9d99; - background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white, inset 0 -2px #f7f7f7, inset 0 -1px #d9d9d7, 0 1px rgba(0, 0, 0, 0.1); } + background-image: linear-gradient(to bottom, #fefefe 10%, #f2f2f1 90%); + box-shadow: inset 0 1px white, inset 0 -2px #f4f4f4, inset 0 -1px #cfcfcd, 0 1px rgba(0, 0, 0, 0.1); } scale slider:active { border-color: #184472; } scale slider:disabled { -- 2.30.2